<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Log in</title>
  <link rel="stylesheet" href="/common/css/bootstrap.min.css">
  <link rel="stylesheet" href="/common/css/solid.css">
</head>
<body>
<div class="container">
  <div class="page-header">
    <div class="pull-right">
      <button class="btn btn-primary" onclick="register()">Register</button>
      <button class="btn btn-success" onclick="login()">Log in</button>
    </div>
    <h1>Log in to access this resource</h1>
  </div>

  <div class="alert alert-danger">
    <p>
      The resource you are trying to access
      (<code>{{currentUrl}}</code>)
      requires you to log in.
    </p>
  </div>

</div>
</div>
<script src="/common/js/solid-auth-client.bundle.js"></script>
<script>
  async function login () {
    const session = await solid.auth.popupLogin()
    if (session) {
      // Make authenticated request to the server to establish a session cookie
      const {status} = await solid.auth.fetch(location, { method: 'HEAD' })
      if (status === 401) {
        alert(`Invalid login.\n\nDid you set ${session.idp} as your OIDC provider in your profile ${session.webId}?`)
        await solid.auth.logout()
      }
      // Now that we have a cookie, reload to display the authenticated page
      location.reload()
    }
  }

  function register () {
    const registration = new URL('/register', location)
    registration.searchParams.set('returnToUrl', location)
    location.href = registration
  }
</script>
</body>
</html>
